/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.s1107.com
* @Contact: QQ:2487937004
*/
<template>
  <view class="page">
    <view class="topBar">
      <view class="status"></view>
    </view>
    <view class="header">
    
    </view>
    <!-- 个人资料 -->
    <view class="top">
      <view class="box">
        <view class="person">
          <view class="avatar">
            <image :src="shopper.logo ? shopper.logo : imgStaticUrl+'images/logo.png'"></image>
          </view>
          <view class="personInfo">
            <view class="name c3 f32">{{shopper.shop_name}}</view>
          
          </view>
        </view>
        <view class="menus">
          <view class="item" @click="navigateTo('/pagesB/seller/order_finish')">
            <view class="volum f32 c3">{{count1}}</view>
            <view class="label f26 c6">订单完成</view>
          </view>
          <view class="item" @click="navigateTo('/pagesB/seller/order_fail')">
            <view class="volum f32 c3">{{count2}}</view>
            <view class="label f26 c6">订单失败</view>
          </view>
          <view class="item" @click="$u.route({url:'/pagesB/seller/order_appraise',params:{shop_id:shopper.id}})">
            <view class="volum f32 c3">{{count3}}</view>
            <view class="label f26 c6">订单评价</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 客户订单 -->
    
    <view class="box">
      <view class="innerBox">
        <view class="serviceList">
          <view class="item" @click="toLive(shopper.id)">
            <view class="icon">
              <image src="@/static/images/service1.png"></image>
            </view>
            <view class="text f26 c3">我要直播</view>
          </view>
          <view class="item" @click="navigateToArticle('平台客服')">
            <view class="icon">
              <image src="@/static/images/service2.png"></image>
            </view>
            <view class="text f26 c3">平台客服</view>
          </view>
          <view class="item" @click="navigateTo('/pagesB/seller/account')">
            <view class="icon">
              <image src="@/static/images/service3.png"></image>
            </view>
            <view class="text f26 c3">子账号</view>
          </view>
        
        </view>
      
      </view>
    </view>
    <!-- 购物车 -->
    <view class="box">
      
      <view class="innerBox">
        <view class="title">
          <view class="titleLeft f28 c3">我的订单</view>
          <view class="titleRight f24 c9" @click="order('/pagesB/seller/allOrder',{index:0})">全部订单<view class="more"></view>
          </view>
        </view>
        <view class="Orderlist">
          <view class="item" @click="order('/pagesB/seller/allOrder',{index:1})">
            
            <view class="icon">
              <image src="@/static/images/sell_icon1.png"></image>
            </view>
            <view class="text f24 c6">待付款{{shopNum.pay_num}}</view>
          </view>
          <view class="item" @click="order('/pagesB/seller/allOrder',{index:2})">
            
            <view class="icon">
              <image src="@/static/images/sell_icon2.png"></image>
            </view>
            <view class="text f24 c6">待发货{{shopNum.send_num}}</view>
          </view>
          <view class="item" @click="order('/pagesB/seller/allOrder',{index:3})">
            
            <view class="icon">
              <image src="@/static/images/sell_icon3.png"></image>
            </view>
            <view class="text f24 c6">待收货{{shopNum.shou_num}}</view>
          </view>
          <view class="item" @click="order('/pagesB/seller/allOrder',{index:4})">
            
            <view class="icon">
              <image src="@/static/images/sell_icon4.png"></image>
            </view>
            <view class="text f24 c6">待评价{{shopNum.ping_num}}</view>
          </view>
          <view class="item" @click="navigateTo('/pagesB/seller/tuikuan')">
            
            <view class="icon">
              <image src="@/static/images/sell_icon5.png"></image>
            </view>
            <view class="text f24 c6">退款/退货{{shopNum.huan_num}}</view>
          </view>
        
        </view>
      </view>
    </view>
    <view class="box clouseout">
      <view class="innerBox">
        <view class="title">
          <view class="total">
            <view class="text1 c3 f26">待结算金额:</view>
            <view class="price">¥ {{billing.money}}</view>
          </view>
          <view class="date f24 c9">结算日每月 {{billing.accountDays}}号</view>
        </view>
        <view class="descripe">
          <view class="left">
            <view class="line">当月交易笔数:<text class="number"> {{billing.monthDealCount}}</text></view>
            <view class="line">当月交易金额:<text class="number"> ¥{{billing.monthDealMoney}}</text></view>
          </view>
          <view class="right">
            <view class="line">当月退货笔数:<text class="number"> {{billing.monthReturnCount}}</text></view>
            <view class="line">当月退货金额:<text class="number"> ¥{{billing.monthReturnMoney}}</text></view>
          </view>
        </view>
      </view>
    </view>
  
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgStaticUrl: this.STATICURL,
      shop_id : '',
      shopper: {},
      billing: {},
      filter: '',
      count1: '',
      count2: '',
      count3: '',
      shopNum: '',
      isService: false,
    }
  },
  onLoad(option) {
    this.isService = uni.getStorageSync('role') === 'service'
    
    this.shop_id = option.shop_id
    console.log(this.shop_id)
    this.getShopperDetail()
    const list = [4,7,8]
    list.forEach((item,index)=>{
      this.getAllNum(item,index)
    })
    
  },
  
  methods: {
    // 后退
    back() {
      this.getback();
    },
    navigateToArticle(url) {
      uni.navigateTo({
        url: `/pagesB/article/detail?title=${url}`,
      })
    },
    toLive(id) {
      uni.setStorage({
        key: 'openLiveID',
        data: id,
        success: function () {
          // #ifndef APP-PLUS
          uni.navigateTo({
            url: '/pagesB/seller/live'
          });
          // #endif
          // #ifdef APP-PLUS
          uni.navigateTo({
            url: '/pages/live/Anchor'
          });
          // #endif
        }
      });
      
    },
    navigateTo(url) {
      this.$navigateTo(url);
    },
    // 跳转至订单列表页面
    order(url, data) {
      this.$navigateTo(url, data)
    },
    getShopperDetail() {
      this.$http.getShopperDetail({
        shop_id: this.shop_id
      }).then(res => {
        this.shopper = res.data.shops;
        this.billing = res.data.billing;
        this.shopNum = res.data;
        console.log(this.shopper)
      })
    },
    getAllNum(filter,index){
      this.$http.getorderCount({
        filter,
      }).then(res => {
        this['count'+(index+1)] = res.data.count
        this.$set(this,'count'+index+1,res.data.count)
        
      })
      
    },
    
    
  },
  onNavigationBarButtonTap() {
    this.getnav('/pagesB/seller/message')
  }
}
</script>

<style lang="less" scoped>
.page {
  padding-top: 200upx;
  .clouseout{
	  display: none;
  }
  
  .topBar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    color: #fff;
    height: 141upx;
    z-index: 3;
    background-size: cover;
    
    .nav {
      height: 88upx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .text {
        font-size: 36upx;
      }
      
      .nav-left {
        position: absolute;
        left: 32upx;
        
        image {
          width: 21upx;
          height: 39upx;
        }
      }
      
      .nav-right {
        font-size: 28upx;
        position: absolute;
        right: 32upx;
        color: #fff;
        z-index: 9999;
        
        image {
          width: 40upx;
          height: 40upx;
        }
        
        .text {
          font-size: 20upx;
          line-height: 20upx;
        }
        
        .badge {
          width: 26upx;
          height: 26upx;
          border-radius: 50%;
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          top: -10upx;
          right: -10upx;
          position: absolute;
          
          .text {
            color: #FA3E3F;
            font-size: 20upx;
          }
        }
      }
    }
  }
  
  .header {
    width: 100%;
    height: 409upx;
    position: fixed;
    left: 0;
    top: 0;
    background-image: linear-gradient(to right, #ffa468, #fa3e3f);
    background-size: cover;
  }
  
  .top {
    padding: 0 32upx;
    position: relative;
    
    .box {
      background: #fff;
      height: 316upx;
      border-radius: 20upx;
      display: flex;
      flex-direction: column;
      
      .person {
        display: flex;
        align-items: center;
        padding: 32upx;
        
        .avatar {
          width: 120upx;
          height: 120upx;
          
          image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #f5f5f5;
          }
        }
        
        .personInfo {
          margin-left: 24upx;
          
          .name {
            font-size: 36upx;
          }
          
          .grade {
            width: 164upx;
            display: flex;
            align-items: center;
            background: rgba(206, 162, 95, 0.1);
            height: 40upx;
            color: #CEA25F;
            justify-content: center;
            margin-top: 24upx;
            border-radius: 24upx;
            
            image {
              width: 36upx;
              height: 18upx;
              margin-left: 4upx;
            }
          }
        }
      }
      
      .menus {
        flex: 1;
        display: flex;
        align-items: flex-end;
        padding-bottom: 32upx;
        justify-content: center;
        
        .item {
          text-align: center;
          flex: 1;
          
          .volum {
            line-height: 37upx;
          }
          
          .label {
            line-height: 37upx;
            margin-top: 8upx;
          }
        }
      }
    }
  }
  
  .box {
    padding: 0 32upx;
    margin-top: 20upx;
    position: relative;
    
    .innerBox {
      background: #fff;
      border-radius: 20upx;
      padding: 32upx 0;
      
      &.tools {
        padding-bottom: 0;
      }
      
      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 32upx 24upx;
        border-bottom: 1upx solid rgba(244, 244, 244, 1);
        
        &.distribution {
          border-bottom: none;
          padding-bottom: 0;
        }
        
        .titleLeft {
          line-height: 40upx;
          display: flex;
          align-items: center;
          
          image {
            width: 25upx;
            height: 25upx;
            margin-right: 8upx;
          }
        }
        
        .titleRight {
          display: flex;
          align-items: center;
          
          .more {
            margin-left: 12upx;
          }
        }
        
        .total {
          .text1 {
            line-height: 37upx;
            font-weight: 400;
            padding-bottom: 16upx;
          }
          
          .price {
            font-size: 42upx;
            line-height: 48upx;
            font-weight: bold;
            color: #FA3E3F;
          }
        }
      }
      
      .Orderlist {
        display: flex;
        align-items: center;
        margin-top: 17upx;
        flex-wrap: wrap;
        
        .item {
          
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          flex: 1;
          
          .icon {
            width: 56upx;
            height: 56upx;
            
            image {
              width: 56upx;
              height: 56upx;
            }
          }
          
          .text {
            line-height: 33upx;
            margin-top: 6upx;
          }
          
        }
      }
      
      .descripe {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12upx 32upx 0;
        
        .line {
          font-size: 26upx;
          color: #999;
          font-weight: 400;
          line-height: 37upx;
          padding-top: 12upx;
          
          text {
            color: #666;
          }
        }
      }
      
      .serviceList {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        
        .item {
          margin-top: 24upx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 25%;
          
          .icon {
            width: 84upx;
            height: 84upx;
            
            image {
              width: 84upx;
              height: 84upx;
            }
          }
          
          .text {
            line-height: 33upx;
            margin-top: 16upx;
          }
          
        }
      }
    }
  }
}
</style>
